<template>
    <view class="group_wrap">
        <goodsInfo :data="state.data" :from="props.from" />
        <view class="group_wrap_detail">
            <groupDedail ref="groupDedailRef" @openSkupop="onOpenSkupopValidae" />
        </view>
    </view>
    <uni-popup ref="popupRef" :safe-area="false">
        <view class="popup-content">
            <view class="pop_cancel" @click.stop="popupRef.close()">
                <img class="pop_logo" :src="getImgOssUrl('/ui-prod-2.0.0/cancel_1.1.png')" />
            </view>
            <skupop
                :goodsId="props.goodsId"
                :shopId="props.shopId"
                :activityId="state.data.activityId"
                :type="3"
                :activityStatus="2"
                :show="show"
                :spellTotalNum="state.groupStatus === 1 ? state.totalNum : 0"
                @popup="popupRef.open('bottom')"
                @close="close"
                @getskuvalue="getskuvalue"
                @buyGoods="toConfirm" />
        </view>
    </uni-popup>
</template>

<script setup>
import goodsInfo from './goodsInfo.vue';
import groupDedail from './groupDedail.vue';
import router from '@/router';
import { checkToken, getImgOssUrl } from '@/commons/utils';
import skupop from '@/components/skupop';
import storage from '@/commons/storage';
import request from '@/request';
import { onShareAppMessage } from '@dcloudio/uni-app';
import { ref, reactive, onMounted, computed } from 'vue';
import { getParamsBySceneHook } from '@/hooks';

const props = defineProps({
    spellOrderId: {},
    // card 分享卡片进入 paystatus 支付页进入
    from: { type: String },
    scene: { type: String },
    activityId: {},
    goodsId: {},
    shopId: {}
});

const spellOrderIdArg = ref(0);

const groupDedailRef = ref(null);
const goodsId = computed(() => {
    return props.goodsId || state.data.goodsId;
});

const state = reactive({
    type: 1,
    data: {}, // 原数据
    from: '', // 从哪里来
    activityStatus: 0, // 活动状态
    groupStatus: 0, // 拼团状态
    totalNum: 0,
    offered: []
});

const show = ref(false);
const getData = () => {
    return new Promise((resolve, reject) => {
        if (props.from == 'card') {
            request('getCardGroupDetailServ', {
                spellOrderId: +spellOrderIdArg.value,
                shopId: +props.shopId
            })
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        } else {
            request('getGroupDetailServ', { spellOrderId: +spellOrderIdArg.value })
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        }
    });
};
const getDetail = async () => {
    const { data } = await getData();
    state.data = data;
    Object.assign(state, data);
    state.from = props.from;
    state.activityStatus = data.activity.activityStatusName.realStatus;
    state.groupStatus = data.groupStatus;
    state.offered = data.offered;
    groupDedailRef.value.onProps(state);
};
// 立即参团校验
const getIsGroupStatus = () => {
    return request('getOffereCheckGroupServ', { spellOrderId: spellOrderIdArg.value });
};

// 进店逛逛
const toHome = () => {
    router.switchTab({ url: '/pages/tabbar/home' });
};
// 重新参与
const toGoodsDetail = () => {
    router.push({
        path: '/pages-cart/good/index',
        query: {
            activityId: props.activityId,
            goodsId: props.goodsId
        }
    });
};

// 选择规格
const popupRef = ref(null);
const onOpenSkupop = () => {
    popupRef.value.open('bottom');
    show.value = true;
};
const onOpenSkupopValidae = async type => {
    if (!(await checkToken())) {
        router.push('/pages-user/login/index');
        return;
    }
    state.type = type;
    // 1 立即参团 2立即开团
    if (type == 1) {
        try {
            const res = await getIsGroupStatus();
        } catch (error) {
            if (error.data.code == 4000006) {
                uni.showModal({
                    content: error.data.msg,
                    cancelText: '进店逛逛',
                    confirmText: '发起拼团',
                    confirmColor: '#FF4D4F',
                    success: e => {
                        if (e.confirm) {
                            state.type = 2;
                            onOpenSkupop();
                        } else {
                            toHome();
                        }
                    }
                });
                return;
            }
        }
    }
    onOpenSkupop();
};
const getskuvalue = () => {};
const close = () => {
    show.value = false;
};
const toConfirm = v => {
    let { quantity, skuId } = v;
    let query = {
        skuList: JSON.stringify([{ goodsId: goodsId.value, quantity, skuId }]),
        orderType: 3,
        activityId: props.activityId,
        spellNum: state.data.totalNum
    };
    // 开团不需要 spellOrderId
    if (state.type != 2) {
        query.spellOrderId = spellOrderIdArg.value;
    }
    router.push({
        path: '/pages-cart/confirm/index',
        query
    });
};
onMounted(async () => {
    if (props.scene) {
        const res = await getParamsBySceneHook(props.scene);
        spellOrderIdArg.value = res.spellOrderId;
    } else {
        spellOrderIdArg.value = props.spellOrderId;
    }

    getDetail();
});

// 邀请好友参团
onShareAppMessage(res => {
    const shopId = storage.get('ZW_SHOP_ID');
    let data = {
        title: `【快来和我一起拼单吧】${state.data.goodsName}`,
        path: `/pages-cart/group/index?from=card&spellOrderId=${spellOrderIdArg.value}&goodsId=${state.data.goodsId}&shopId=${shopId}&activityId=${state.data.activityId}`,
        imageUrl: state.data.coverImg
    };
    return data;
});
</script>

<style lang="scss" scoped src="./index.scss"></style>
